@import "../_mixin";
.user-center {



	.menu {
		height: 8.0rem;
		background-color: #fff;

		.box {
			padding: 0.8rem 0 1.6rem 0.4rem;

			.item {
				padding: 0.346667rem 0;
				border-bottom: 1px solid #ddd;

				i {
					margin-left: 0.106667rem;
					margin-right: 0.24rem;
					color: #999;
					@include font-dpr(18px);
				}

				span {
					color: #999;
					@include font-dpr(16px);
				}
			}

			.close {
				text-align: center;

				button {
					margin-top: 0.533333rem;
					padding: 0.213333rem 0.8rem;
					border: 1px solid #999999;
					border-radius: 0.16rem;
					background-color: #fff;
					color: #666;
					@include font-dpr(18px);
				}
			}
		}
	}

	header {
		position: relative;
		padding: 0.4rem;
		height: 6.266667rem;
		background-color: #fe7140;

		i {
			color: #fff;
			@include font-dpr(25px);
		}

		.fl {
			float: left;
		}

		.fr {
			float: right;
		}

		.money-box {
			position: absolute;
			left: 0;
			bottom: 0.4rem;
			width: 100%;
			height: 4.32rem;

			.money {
				padding-top: 2.0rem;
				width: 6.4rem;
				margin: 0 auto;
				height: 4.32rem;
				text-align: center;
				color: #fff;
				background-image: url(../../images/user/index/round.png);
				background-size: contain;

				span {
					@include font-dpr(16px);
				}

				strong {
					display: block;
					margin-top: 0.266667rem;
					@include font-dpr(29px);
				}
			}
		}
	}

	nav {
		display: -webkit-box;
		padding: 0.48rem 0;
		background-color: #fff;
		border-top: 1px solid #dddddd;
		border-bottom: 1px solid #dddddd;

		a {
			display: block;
			-webkit-box-flex: 1;
			width: 100%;
			color: #ff9900;
			text-align: center;
			@include font-dpr(19px);
		}

		span {
			display: block; 
			width: 1px;
			background-color: #d4d4d4;
			content: " ";
		}
	}

	.list {
		margin-top: 0.266667rem;
		background-color: #fff;

		ul {
			border-bottom: 1px solid #dddddd;
		}

		li {
			float: left;
			padding: 0.4rem 0 0.4rem 0.453333rem;
			width: 50%;
			border-left: 1px solid #dddddd;
			border-top: 1px solid #dddddd;

			&:nth-child(odd){
				border-left: 0.04rem solid #fff;
			}

			strong {
				display: block;
				margin-bottom: 0.213333rem;
				color: #666;
				@include font-dpr(16px);

				&:before {
					display: inline-block;
					margin-right: 0.266667rem;
					width: 0.213333rem;
					height: 0.213333rem;
					border-radius: 50%;
					content: " ";
				}
			}

			&:nth-child(1) strong:before {
				background-color: #7acf15;
			}

			&:nth-child(2) strong:before {
				background-color: #8561ea;
			}

			&:nth-child(3) strong:before {
				background-color: #ff255d;
			}

			&:nth-child(4) strong:before {
				background-color: #ff5325;
			}

			span {
				margin-left: 0.506667rem;
				color: #999;
				@include font-dpr(15px);
			}
		}
	}

	.uc-tab {
		display: -webkit-box;
		margin-top: 0.266667rem;
		padding: 0.533333rem 0;
		background-color: #fff;
		border-top: 1px solid #dddddd;
		border-bottom: 1px solid #dddddd;
		margin-bottom:1.75rem;

		.box {
			-webkit-box-flex: 1;
			width: 100%;
			text-align: center;

			.pic {
				margin: 0 auto 0.266667rem auto;
				padding-top: 0.266667rem;
				width: 1.6rem;
				height: 1.6rem;
				border-radius: 0.24rem;

				i {
					color: #fff;
					@include font-dpr(30px);
				}
			}

			span {
				color: #999;
				@include font-dpr(15px);
			}

			&:nth-child(1) .pic {
				background-color: #f6b505;
			}

			&:nth-child(2) .pic {
				background-color: #7699ff;
			}

			&:nth-child(3) .pic {
				background-color: #fe7140;
			}
		}
	}



	.menu-transition {
	  transition: all .6s ease;
	  height: 8.0rem;
	  overflow: hidden;
	}

	.menu-enter, .menu-leave {
	  height: 0;
	  opacity: 0;
	}

	.btnlist{
		background: #ffffff;
		padding:0.25rem 0.0rem;
		position: fixed;
		bottom:0;
		display: block;
		width:100%;
		a{
			display: inline-block;
			margin-top: 0.266667rem;
			border-top: 1px solid #dddddd;
			padding: 0.3rem 0;
			text-align: center;
			/* color: $primaryColor; */
			/* background-color: #fff; */
			
			@include font-dpr(18px);
			width:46%;
			margin:auto 2%;
			color:#ffffff;
			border-radius: 0.125rem;
		}

		.go-buy {
			background: #fe7140;
		}

		.auto-buy {
			background: #f6b505;
		}
		.bindingCard{
			background: #7699ff;
			width:96%;
		}
	}
	.space{
		margin-bottom:0.0rem;
		padding-top:0.0rem
	}



}

